<template>
  <div class="edit-container">
    <el-form v-loading="formLoading" ref="form" :model="form" :rules="rules" label-width="130px">
      <el-form-item label="户号" prop="account" style="width: 600px;">
        <el-input v-model="form.account" placeholder="请输入" maxlength="16"></el-input>
      </el-form-item>
      <el-form-item label="客户姓名" prop="userName" style="width: 600px;">
        <el-input v-model="form.userName" placeholder="请输入" maxlength="255"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="userPhone" style="width: 600px;">
        <el-input v-model="form.userPhone" placeholder="请输入" maxlength="12" minlength="11"></el-input>
      </el-form-item>
      <el-form-item label="详细地址" prop="address" style="width: 600px;">
        <el-input v-model="form.address" placeholder="请输入" maxlength="255"></el-input>
      </el-form-item>
      <el-form-item label="燃气表编号" prop="gasNumber" style="width: 600px;">
        <el-input v-model="form.gasNumber" placeholder="请输入" maxlength="16"></el-input>
      </el-form-item>
      <el-form-item label="安装日期" prop="installTime">
        <el-date-picker
            v-model="form.installTime"
            type="date"
            placeholder="选择时间" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" class="col"
            style="width: 470px;">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="燃气量" prop="gasQuantity" style="width: 600px;">
        <el-input v-model.number="form.gasQuantity" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="notes" style="width: 600px;">
        <el-input v-model="form.notes" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button v-loading="saveLoading" element-loading-background="rgba(0, 0, 0, 0.3)" type="primary"
                   @click="handlerSubmit" v-has-permi="['admin:equipment:save']">保存
        </el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

import {save} from "@/api/equipment";

export default {
  components: {},
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  data() {
    return {
      form: {
        id: 1,
        account: '',
        userName: '',
        userPhone: '',
        address: '',
        gasNumber: '',
        installTime: '',
        gasQuantity: '',
        notes: '',
      },
      rules: {
        account: [{required: true, message: '请填写', trigger: ['blur']}],
        userName: [{required: true, message: '请填写', trigger: ['blur']}],
        userPhone: [{required: true, message: '请填写', trigger: ['blur']}],
        address: [{required: true, message: '请填写', trigger: ['blur']}],
        gasNumber: [{required: true, message: '请填写', trigger: ['blur']}],
        installTime: [{required: true, message: '请填写', trigger: ['blur']}],
        gasQuantity: [{required: true, message: '请填写', trigger: ['blur']}],
      },
      roles: [],
      saveLoading: false,
      formLoading: false,
    }
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      if (this.isCreate !== 1) return //不是编辑页，即新增页则直接返回
      const {id, account, userName, userPhone, address, gasNumber, installTime, gasQuantity, notes} = this.editData
      this.form.id = id
      this.form.account = account
      this.form.userName = userName
      this.form.userPhone = userPhone
      this.form.address = address
      this.form.gasNumber = gasNumber
      this.form.installTime = installTime
      this.form.gasQuantity = gasQuantity
      this.form.notes = notes
    },
    handlerSubmit() {
      if (this.saveLoading || this.formLoading) {
        return;
      }
      this.$refs.form.validate(valid => {
        if (!valid) return;
        this.saveLoading = true;
        save(this.form).then(() => {
          this.$message.success('保存成功');
          this.close();
        }).finally(() => {
          this.saveLoading = false
        })
      })
    },
    close() {
      this.$emit('hideEditDialog')
    }
  }
}
</script>
